import { defineComponent, ref, onMounted } from 'vue'
import { NTable, NCode } from 'naive-ui'
import pageStyle from './styles/index.module.scss'
import MessageBox from '@/components/nComponents/MessageBox'
export default defineComponent({
  emits: ['loaded'],
  setup(props, { expose, emit }) {
    const slOne = `
  backText = option.label.includes(value) || option.value.includes(value)
`
    const option = { label: '张三', value: 'ZS' }
    const show = ref(false)
    const open = () => {
      show.value = true
    }
    expose({
      open
    })
    onMounted(() => {
      emit('loaded')
    })
    return () => (
      <>
        <MessageBox
          width="600px"
          title="过滤器函数"
          v-model={show.value}
          v-slots={{
            default: () => (
              <>
                <div class={pageStyle.illustrate}>
                  <NTable bordered={true} single-line={false}>
                    <thead>
                      <tr>
                        <th>内置参数</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>value</td>
                        <td>输入文本,可能为空</td>
                      </tr>
                      <tr>
                        <td>option</td>
                        <td>
                          下拉框单条数据,示例: <n-code code={option} language="json" inline />
                        </td>
                      </tr>
                    </tbody>
                  </NTable>
                  <NTable class="mt-[20px]" bordered={true} single-line={false}>
                    <thead>
                      <tr>
                        <th>返回值</th>
                        <th>说明</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>backText(true | false)</td>
                        <td>对此赋值</td>
                      </tr>
                    </tbody>
                  </NTable>
                  <div class="mt20 desc">示例</div>
                  <div class="example">
                    <NCode code={slOne} language="js" word-wrap={true} show-line-numbers />
                  </div>
                </div>
              </>
            )
          }}
        />
      </>
    )
  }
})
